.site-topbar {
    height: 40px;
    background-color: #333;
    font-size: 12px;
}
.site-topbar a {
    color: #b0b0b0;
    display: inline-block;
}
.site-topbar a:hover{
    color: #fff;
}
.topbar-nav > ul > li {
    float: left;
    line-height: 40px;
    margin-right: 15px;
}

.site-topbar .topbar-info,
.site-topbar .topbar-car {
    float: right;
    height: 40px;
    line-height: 40px;
}

.site-topbar .topbar-info > a {
    margin-right: 13px;
}

.topbar-car >a {
    background-color: #424242;
    padding: 0 24px;
    height: 40px;
}


/* 小箭头 */
.topbar-nav .submenu {
    position: relative;
    padding-right: 14px;
}
.topbar-nav .submenu::after{
    position: absolute;
    top: 50%;
    right: 0;
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
    /* 旋转45度 */
    transform: translateY(-4px) rotate(45deg);
    /* 箭头动画 */
    transition: transform 0.3s ease 0s;
}
/* 鼠标触碰 箭头旋转 */
.topbar-nav .submenu:hover::after {
    transform: translateY(0) rotate(225deg);
    border-color: #fff;
}

/* 实心三角形 */
.topbar-nav .active::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -6px;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #fff;
    /* 隐藏 */
    display: none;
}
.topbar-nav .active:hover::before {
    display: block;
}


/* 云服务下拉列表 */
.submenu .submenu-list {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -52.5px;
    height: 0;
    width: 105px;
    background-color: #fff;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: height 0.3s;
    z-index: 999;
}
.submenu:hover .submenu-list {
    height: 150px;
}

/* 下载APP */
.appcode {
    position: absolute;
    top: 40px;
    left: 50%;
    width: 124px;
    background-color: #fff;
    margin-left: -62px;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: #333;
    /* 隐藏 */
    height: 0;
    overflow: hidden;
    /* 动画 */
    transition: height 0.3s;
    z-index: 999;
}
.submenu:hover .appcode {
    height: 148px;
}
.appcode >img {
    display: block;
    margin: 17px auto 16px;
}

.submenu .submenu-list > ul > li img {
    margin: 0 4px 0 6px;
    vertical-align: -3px;
}
.submenu-list > ul > li {
    line-height: 30px;
}
.submenu-list > ul > li:hover a{
    color: #ff6700;
}


.topbar-car .car-mini {
    background-color: #424242;
    width: 120px;
    text-align: center;
    height: 40px;
}
.topbar-car .car-mini em {
    margin-right: 7px;
}
.topbar-car .car-mini:hover {
    color: #ff6a00;
    background-color: #fff;
}

.topbar-car {
    position: relative;
}
/* 购物车菜单 */
.topbar-car .car-mneu{
    position: absolute;
    top: 40px;
    right: 0;
    width: 316px;
    height: 100px;
    background-color: #fff;
    box-shadow: 0px 1px 7px 0px rgba(0 0 0 / 30%);
    text-align: center;
    /* 隐藏 */
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: height 0.3s padding 0.3s;
    z-index: 10;
}
.topbar-car:hover .car-mneu {
    height: 50px;
    padding: 25px 0;
}



/* 网站导航 */
.site-header .header-logo{
    float: left;
    margin-top: 23px;
}
.site-header .header-logo>a:active img {
    /* logo缩小0.9 */
    transform: scale(0.9);
}
.site-header .header-nav{
    float: left;
    margin-left: 194px;
}
.site-header .header-nav >ul>li{
    float: left;
    padding: 42px 10px;
}
.site-header .header-nav >ul>li a{
    color: #333;
    font-size: 16px;
}

.site-header .header-search{
    float: right;
    width: 297px;
    margin-top: 25px;
}
.site-header .header-search .search-text{
    width: 245px;
    height: 50px;
    border: 1px solid #e0e0e0;
    border-right: none;
    font-size: 14px;
    color: #333;
    line-height: 50px;
    padding: 0 11px;
    box-sizing: border-box;
    float: left;
}
.site-header .header-search .search-btn{
    display: block;
    width: 52px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    float: left;
    box-sizing: border-box;
    text-align: center;
    line-height: 50px;
}
.search-btn:hover {
    color: #ff6700;
    background-color: #ff6a00;
    border-color: #ff6a00;
}
/* 当鼠标触碰，整体边框变化 */
.header-search:hover .search-text,
.header-search:hover .search-btn {
    border-color: #b0b0b0;
}
/* 当鼠标点击获取焦点时，边框样式 */
.header-search .search-text:focus,
.header-search .search-text:focus + .search-btn {
    border-color: #ff6a00;
}

.focus-slider {
    position: relative;
}

/* 分类导航 */
.focus-slider .category {
    position: absolute;
    top: 0;
    left: 0;
    width: 234px;
    height: 460px;
    background-color: rgba(105, 101, 101);
    padding-top: 19px;
    box-sizing: border-box;
    z-index: 2;
}
.focus-slider .category > ul > li {
    line-height: 42px;
}
.category > ul > li a {
    display: block;
    font-size: 14px;
    color: #fff;
    padding: 0 23px 0 30px;
}
.category > ul > li a:hover {
    background-color: #ff6a00;
}
.category > ul > li > a> em{
    float: right;
}
.category-list {
    position: absolute;
    top: 0;
    left: 234px;
    width: 992px;
    height: 460px;
    background-color: aquamarine;
    display: none;
    text-align: center;
    font-size: 40px;
    line-height: 460px;
}
.category > ul >li:hover .category-list {
    display: block;
}



/* 轮播图 */
.focus-slider .swiper {
    width: 1226px;
    height: 460px;
}

/* 左箭头 */
.swiper-button-prev {
    left: 244px;
}
/* 小点点 */
.swiper-pagination {
    text-align: right;
    padding-right: 34px;
    box-sizing: border-box;
}
.swiper-container-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-custom, 
.swiper-pagination-fraction {
    bottom: 11.5px;
}


/* 未选中小点点 */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border: 2px solid #4d4d4d;
    border-radius: 50%;
}
/* 选中了小点点 */
.swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;
    background-color: #666;
    border: 2px solid #4d4d4d;
    border-radius: 50%;
}


.recommend {
    width: 100%;
    height: 624px;
    background-color: #f7f7f7;
    margin: 26px 0 34px 0;
    overflow: hidden;
    padding-bottom: 36px;
}
.recommend .index-banner {
    width: 1226px;
    height: 120px;
    margin: 25px auto 48px;
}

.music-con .m-title {
    text-align: center;
    color: #333333;
    font-size: 32px;
}
.music-con .m-tab {
    text-align: center;
    padding: 34px 0 36px 0;
}
.music-con .m-tab a {
    font-size: 16px;
    color: #333;
    margin: 0 23px;
}
.music-con .m-tab a.active {
    color: #31C27C;
}

.music-item .music-list > li {
    width: 224px;
    float: left;
    margin-right: 26px;
}
.music-item .music-list > li:last-child {
    margin-right: 0;
}
.music-item .music-list >li >a {
    position: relative;
    width: 224px;
    height: 224px;
    display: block;
    overflow: hidden;
}
.music-list-title {
    margin: 14px 0 6px 0;
}
.music-list-title > a{
    color: #333;
}
.music-list-title > a:hover {
    color: #31C27C;
}
.music-item .music-list li span {
    color: #999;
}

/* 阴影 */
.img-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 224px;
    height: 224px;
    background-color: rgba(0, 0, 0, 0);
    transition: all ease 0.5s;
    z-index: 0;
}
.music-list > li > a:hover .img-mask {
    background-color: rgba(0, 0, 0, 0.3);
}
/* 播放按钮 */
.img-play {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -32.5px 0 0 -32.5px;
    display: block;
    width: 65px;
    height: 65px;
    background-image: url(../images/m-play.png);
    z-index: 1;
    /* 透明度 */
    opacity: 0;
    transform: scale(0.2);
    /* 动画 */
    transition: transform ease 0.5s;
}
.music-list >li > a:hover .img-play {
    transform: scale(1);
    opacity: 1;
}
/* 图片放大 */
.music-list > li > a >img {
    transition: transform ease 0.6s;
}
.music-list > li >a:hover img {
    transform: scale(1.5);
}

.music-item .music-list {
    display: none;
}
.music-item ul.current {
    display: block;
}


/* 游乐场 */
.header-title {
    float: left;
    width: 820px;
}
.header-title h2{
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}
.more-products {
    float: right;
}
.more-products a {
    display: block;
    width: 118px;
    height: 42px;
    color: #000;
    border: 1px solid #bababa;
    border-radius: 20px;
    line-height: 42px;
    text-align: center;
    margin-top: 12px;
}
.more-products a:hover {
    border-color: #000;
}

.playground-con {
    margin: 33px 0 40px 0;
}
.playground-con .con-l {
    width: 610px;
    height: 715px;
    float: left;
    background-image: url(../images/playground-1.png);
    background-size: cover;
}
.playground-con .con-m,
.playground-con .con-r {
    width: 295px;
    height: 715px;
    float: left;
}
.playground-con .con-m {
    margin: 0 13px;
}
.con-m-1 {
    position: relative;
    height: 295px;
    width: 295px;
    background-image: url(../images/playground-2.png);
    background-size: cover;
    margin-bottom: 20px;
}
.con-m-2 {
    position: relative;
    width: 295px;
    height: 400px;
    background-image: url(../images/playground-3.png);
    background-size: cover;
}
.con-r-1 {
    width: 295px;
    height: 400px;
    background-image: url(../images/playground-4.png);
    background-size: cover;
    margin-bottom: 20px;
}
.con-r-2 {
    height: 295px;
    width: 295px;
    background-image: url(../images/playground-5.png);
    background-size: cover;
}
.con-l {
    position: relative;
}
/* 圆圈 */
.dot {
    position: absolute;
    display: none;
    /* width: 32px; */
    width: 42px;
    height: 32px;
    border-radius: 50%;
    color: #333;
}
/* 所有小圆点，默认隐藏，当鼠标触碰时显示 */
.con-l:hover a,
.con-m-1:hover a,
.con-m-2:hover a {
    display: block;
}
.dot-1 {
    top: 249px;
    left: 248px;
}
.dot-2 {
    top: 359px;
    left: 128px;
}
.dot-3 {
    top: 460px;
    left: 71px;
}
.dot-4 {
    top: 152px;
    left: 52px;
}.dot-5 {
    top: 284px;
    left: 80px;
}
/* 外圆圈 */
.dot::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    transition: transform ease 0.5s;
}
.dot:hover::before {
    transform: scale(0.9);
    box-shadow: 0 0 5px #fff;
}
/* 内圆圈 */
.dot::after {
    position: absolute;
    top: 10px;
    left: 10px;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform ease 0.5s;
}
.dot:hover::after {
    transform: scale(0.7);
}

.dot-tips {
    position: absolute;
    top: -30px;
    left: 40px;
    width: 130px;
    background-color: #FFFFFF;
    padding: 10px;
    display: none;
}
.dot:hover .dot-tips {
    display: block;
}
.dot-tips span {
    font-size: 24px;
    font-weight: bold;
}
.dot-tips i {
    font-size: 12px;
}

.videos {
    background-color: #F8F8F8;
    overflow: hidden;
    padding-bottom: 20px;
}
.videos h2 {
    font-size: 28px;
    text-align: center;
    color: #000;
    margin: 33px 0;
}
.videos ul li a {
    position: relative;
    display: block;
    color: #000;
    font-size: 16px;
    transition: transform ease 0.5s;
}
.videos ul li a:hover {
    box-shadow: 5px 5px 10px #ddd;
}
.videos ul li a img {
    display: block;
}
.videos ul li {
    float: left;
    margin-right: 6px;
    margin-bottom: 10px;
}
.videos ul li:nth-child(4n) {
    margin-right: 0;
}
.videos ul li p {
    height: 55px;
    line-height: 55px;
    text-align: center;
    background-color: #fff;
}

/* 视屏播放按钮 */
.video-play {
    position: absolute;
    top: 145px;
    right: 13px;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../images/video-play.png);
    background-size: cover;
}

/* v-mask start */
.v-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 999;
    display: none;
}
.v-mask .mask-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    transform: translate(-50%,-50%);
}
.mask-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background-color: #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    font-size: 20px;
}
.mask-close:hover {
    background-color: #fff;
}
/* v-mask end */


/* mall start */
.mall h2 {
    position: relative;
    font-size: 34px;
    color: #000;
    text-align: center;
    margin: 36px 0 44px 0;
}
.mall h2::after {
    position: absolute;
    left: 50%;
    bottom: -12px;
    margin-left: -15px;
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: #C7000B;
}
.mall ul li {
    position: relative;
    float: left;
    margin-right: 13px;
    margin-bottom: 30px;
    overflow: hidden;
}
.mall ul li a {
    color: #FFFFFF;
    display: block;
}
.mall ul li:nth-child(3n){
    margin-right: 0;
}
.mall-info{
    position: absolute;
    bottom: -25px;
    left: 20px;
    z-index: 1;
    /* 动画 */
    transition: bottom ease 0.5s;
}
.mall ul li a:hover .mall-info {
    bottom: 40px;
}
.mall-title {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 0 8px 0;
}
.mall-more span {
    display: inline-block;
    font-size: 16px;
    padding-top: 18px;
}
.mall-more i {
    color: #C70318;
    font-size: 14px;
    font-weight: bold;
}

/* 产品信息动画 */


/* 阴影 */
.mall-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320px;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    z-index: 0;
    transition: opacity ease 1s;
}
.mall ul li a:hover .mall-shadow {
    opacity: 0.5;
}
/* 图片放大 */
.mall ul li a img{
    display: block;
    transition: transform ease 0.6s;
}
.mall ul li a:hover img {
    transform: scale(1.2);
}

/* 更多 箭头 */
.mall-more {
    transition: margin-left ease 0.5s;
}
.mall-more:hover i {
    margin-left: 10px;
}
/* mall end */


.accordion {
    background-color: #f8f8f8;
    overflow: hidden;
    padding-bottom: 40px;
}
.accordion h2 {
    text-align: center;
    margin: 51px 0 44px 0;
}
.accordion ul li {
    float: left;
    width: 172px;
    height: 270px;
    overflow: hidden;
    transition: width ease 0.5s;
}
.accordion ul li.active {
    width: 361px;
}

.accordion ul li a {
    position: relative;
    display: block;
    color: #fff;
}
.accordion ul li h3 {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 0;
    line-height: 75px;
    font-weight: 400;
    font-size: 16px;
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(0, 0, 0, 0.4) 90%,
        rgba(255, 255, 255, 0)
    );
    text-indent: 1em;
    transition: height ease 0.5s;
}
.accordion ul li a:hover h3 {
    height: 75px;
}


.footer-service {
    padding: 31px 0;
    border-bottom: 1px solid #e0e0e0;
}
.footer-service ul li {
    float: left;
    width: 19.8%;
    text-align: center;
    border-left: 1px solid #606060;
}
.footer-service ul li i{
    font-size: 24px;
    vertical-align: -2px;
}
.footer-service ul li a {
    font-size: 16px;
    font-weight: bold;
    color: #616161;
}
.footer-service ul li:first-child {
    border: none;
}
.footer-links {
    padding: 40px 0;
}
.footer-links dl {
    float: left;
    width: 160px;
}
.footer-links dl:first-child {
    margin-left: 160px;
}
.footer-links dl dt {
    font-size: 14px;
    font-weight: bold;
    color: #424242;
    margin-bottom: 31px;
}
.footer-links dl dd {
    margin: 10px 0 0;
    font-size: 12px;
}
.footer-links dl dd a {
    font-size: 12px;
    color: #757575;
}
.footer-links dl dd a:hover {
    color: #ff6700;
}
.telephone {
    float: left;
    width: 251px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
    color: #616161;
}
.telephone p {
    margin-bottom: 5px;
    font-size: 12px;
}
.telephone p.phone {
    font-size: 22px;
    color: #ff6700;
    font-weight: bold;
    line-height: 1;
}
.telephone a {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ff6700;
    color: #ff6700;
    transition: background-color ease 1s;
}
.telephone a em {
    font-size: 12px;
}
.telephone a:hover {
    background-color: #ff6700;
    color: #fff;
}
.copyright {
    text-align: center;
    line-height: 72px;
}





